<template>
    <div>
      <el-dialog
        title="查看详情"
        width="1300px"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :close-on-click-modal="false"
  
      >
        <div class="dialogBody">
          <ul>
            <li class="flexItem">
              <div>
                <span class="item_lable">活动类型:</span>
                {{ info.type }}
              </div>
              <div>
                <span class="item_lable">活动发起人:</span>
                {{ info.originator }}
              </div>
            </li>
            <li class="flexItem">
              <div>
                <span class="item_lable">活动标题:</span>
                {{ info.name }}
              </div>
              <div>
                <span class="item_lable">联系电话:</span>
                {{ info.originator_tel }}
              </div>
            </li>
            <li class="flexItem">
              <div>
                <span class="item_lable">活动地点:</span>
                {{ info.address }}
              </div>
              <div>
                <span class="item_lable">活动起止时间:</span>
                {{ info.begin_time }}~{{ info.end_time }}
              </div>
            </li>
            <li class="flexItem">
              <div>
                <span class="item_lable">人数限制:</span>
                {{ info.person_num_limit }}
              </div>
              <div>
                <span class="item_lable">报名起止时间:</span>
                {{ info.sing_start_time }}~{{ info.sing_end_time }}
              </div>
            </li>
            <li class="flexItem">
              <div>
                <span class="item_lable">活动积分:</span>
                <span style="color: #1890ff; margin-right: 14px">
                 {{ info.point_type == 1 ? '获得' : '消耗' }}{{ Number(info.point_num) }}积分</span
                >
                <span style="color: #ff9243">
                  获得荣誉积分{{ info.honor_point_num }}</span
                >
              </div>
              <div>
                <span class="item_lable">性别限制:</span>
                {{
                  info.sex_limit == 1 ? "男" : info.sex_limit == 2 ? "女" : "不限"
                }}
              </div>
            </li>
            <li class="flexItem">
              <div style="display: flex">
                <span class="item_lable">活动内容:</span>
                <div v-html="info.content"></div>
              </div>
            </li>
            <li class="flexItem">
              <div>
                <span class="item_lable">温馨提示:</span>
                {{ info.remarks }}
              </div>
            </li>
            <li class="flexItem">
              <div>
                <span class="item_lable">发起时间:</span>
                邻里活动
              </div>
            </li>
            <li class="flexItem">
            <div>
              <span class="item_lable">活动封面:</span>
              <el-image
                
                style="vertical-align: top;width: 150px; height: 150px"
                :src="info.cover"
                :preview-src-list="[info.cover]"
              >
              </el-image>
              <!-- <img
                style="vertical-align: top"
                width="160"
                height="160"
                :src="info.cover"
                alt=""
              /> -->
            </div>
            <div>
              <span class="item_lable">活动详情页:</span>
              <el-image
                
                style="vertical-align: top;width: 150px; height: 150px"
                :src="info.detail_pic"
                :preview-src-list="[info.detail_pic]"
              >
              </el-image>
              <!-- <img
                style="vertical-align: top"
                width="160"
                height="160"
                :src="info.detail_pic"
                alt=""
              /> -->
            </div>
          </li>
          </ul>
 
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {
  activeDetail,
} from "@/api/activity.js";
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false,
        },
        id: {
            type: Number,
            default: "",
        },
    },
  data() {
    return {
        info: {},
    }
  },

  mounted() {
    this.getDetails();
  },

  methods: {
    getDetails() {
        activeDetail({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  }
}
</script>
<style>
.flexItem{
    display:flex;  
}

.flexItem div{
    flex:1;
    margin-bottom: 10px;
    color: #000;
}

.item_lable {
        display: inline-block;
        width: 100px;
        color: #606266;
      }
</style>